<!-- 
    全屏组件
    组件独立功能，不需要与其他组件通信
 -->
<template>
    <div class="content">
        <i :title="bool ? '进入全屏' : '退出全屏'" :class="bool ? 'iconfont icon-quanping' : 'iconfont icon-tuichuzhuanhuan'" @click="isScreenFull"></i>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import screenfull from "screenfull";

const bool = ref(true)

//监听Esc事件；
const screenFull = () => {
    //监听f11事件
    window.addEventListener("keydown", KeyDown, true);
    //监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化
    
    /*
        浏览器在进入全屏或退出全屏时会触发相对应的方法
        fullscreenchange，mozfullscreenchange，webkitfullscreenchange，msfullscreenchange
    */ 
    document.addEventListener("fullscreenchange", () => {
        bool.value = !bool.value;//切换得图标使用得属性
    });
    document.addEventListener("mozfullscreenchange", () => {//chrome
        bool.value = !bool.value;
    });
    document.addEventListener("webkitfullscreenchange", () => {//Firefox
        bool.value = !bool.value;
    });
    document.addEventListener("msfullscreenchange", () => {//IE
        bool.value = !bool.value;
    });
}

const KeyDown = (event: { keyCode: number; returnValue: boolean; }) => {
    if (event.keyCode === 122) {
        event.returnValue = false;
        isScreenFull(); //触发全屏的方法
    }
}

const isScreenFull = () => {
    if (!screenfull.isEnabled) {
        return false;
    }
    screenfull.toggle();
}

onMounted(() => {
    screenFull()
})
</script>

<style lang="less" scoped>
</style>